{% extends "base.html" %}

{% block title %}仪表盘 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .card-hover {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .stat-card {
        border-radius: 10px;
        overflow: hidden;
    }
    .stat-card-header {
        font-size: 1.5rem;
        font-weight: bold;
        padding: 1rem;
    }
    .stat-card-body {
        padding: 1.5rem;
    }
    .stat-value {
        font-size: 2rem;
        font-weight: bold;
    }
    .upcoming-events {
        max-height: 300px;
        overflow-y: auto;
    }
    .event-item {
        border-left: 3px solid #0d6efd;
        padding-left: 1rem;
        margin-bottom: 1rem;
    }
    .event-date {
        font-size: 0.85rem;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h1 class="text-2xl font-bold text-gray-800">
                <i class="fa fa-dashboard mr-2 text-primary"></i>欢迎回来，{{ current_user.username }}！
            </h1>
            <p class="text-gray-600 mt-2">
                今天是 {{ moment().format('YYYY年M月D日') }}，{{ moment().format('dddd') }}。
                {{ get_greeting() }}，您有 {{ upcoming_courses_count }} 节课程，{{ upcoming_activities_count }} 个活动。
            </p>
        </div>
    </div>
</div>

<!-- 统计卡片 -->
<div class="row mb-4">
    <!-- 今日课程 -->
    <div class="col-md-3 mb-4">
        <div class="stat-card card-hover bg-gradient-to-br from-blue-50 to-blue-100 border-0">
            <div class="stat-card-header text-blue-600">
                <i class="fa fa-book mr-2"></i>今日课程
            </div>
            <div class="stat-card-body">
                <div class="stat-value text-blue-700">{{ today_courses_count }}</div>
                <p class="text-gray-600 mt-2">
                    {{ next_course_time or '暂无课程' }}
                    {% if next_course_time %}
                        <span class="text-xs text-blue-500 ml-2">{{ next_course }}</span>
                    {% endif %}
                </p>
                <a href="{{ url_for('course_schedule') }}" class="text-sm text-blue-600 hover:text-blue-800 mt-2 d-block">
                    查看课程表 <i class="fa fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 待完成作业 -->
    <div class="col-md-3 mb-4">
        <div class="stat-card card-hover bg-gradient-to-br from-purple-50 to-purple-100 border-0">
            <div class="stat-card-header text-purple-600">
                <i class="fa fa-homework mr-2"></i>待完成作业
            </div>
            <div class="stat-card-body">
                <div class="stat-value text-purple-700">{{ pending_assignments_count }}</div>
                <p class="text-gray-600 mt-2">
                    {{ pending_assignments_due or '暂无待完成作业' }}
                </p>
                <a href="{{ url_for('assignments') }}" class="text-sm text-purple-600 hover:text-purple-800 mt-2 d-block">
                    查看作业 <i class="fa fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 最新成绩 -->
    <div class="col-md-3 mb-4">
        <div class="stat-card card-hover bg-gradient-to-br from-green-50 to-green-100 border-0">
            <div class="stat-card-header text-green-600">
                <i class="fa fa-line-chart mr-2"></i>最新成绩
            </div>
            <div class="stat-card-body">
                <div class="stat-value text-green-700">{{ latest_score or '暂无' }}</div>
                <p class="text-gray-600 mt-2">
                    {{ latest_score_course or '' }}
                </p>
                <a href="{{ url_for('scores') }}" class="text-sm text-green-600 hover:text-green-800 mt-2 d-block">
                    查看所有成绩 <i class="fa fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 未读消息 -->
    <div class="col-md-3 mb-4">
        <div class="stat-card card-hover bg-gradient-to-br from-red-50 to-red-100 border-0">
            <div class="stat-card-header text-red-600">
                <i class="fa fa-envelope-o mr-2"></i>未读消息
            </div>
            <div class="stat-card-body">
                <div class="stat-value text-red-700">{{ unread_messages_count }}</div>
                <p class="text-gray-600 mt-2">
                    {{ latest_message_time or '暂无新消息' }}
                </p>
                <a href="{{ url_for('messages') }}" class="text-sm text-red-600 hover:text-red-800 mt-2 d-block">
                    查看消息 <i class="fa fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 主要内容区域 -->
<div class="row">
    <!-- 左侧：课程表和活动 -->
    <div class="col-lg-8">
        <!-- 本周课程表 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-xl font-bold text-gray-800">
                    <i class="fa fa-calendar mr-2 text-primary"></i>本周课程表
                </h2>
                <a href="{{ url_for('course_schedule') }}" class="btn btn-sm btn-primary">
                    查看完整课程表
                </a>
            </div>
            
            <!-- 课程表 -->
            <div class="overflow-x-auto">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>周一</th>
                            <th>周二</th>
                            <th>周三</th>
                            <th>周四</th>
                            <th>周五</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for time_slot in time_slots %}
                        <tr>
                            <td class="font-medium text-gray-700">{{ time_slot.time }}</td>
                            {% for day in ['周一', '周二', '周三', '周四', '周五'] %}
                                {% set course = weekly_schedule.get(day + '-' + time_slot.id) %}
                                <td>
                                    {% if course %}
                                        <div class="bg-blue-50 p-2 rounded border-l-4 border-blue-400">
                                            <div class="font-medium text-blue-700">{{ course.name }}</div>
                                            <div class="text-xs text-gray-600 mt-1">{{ course.teacher }} | {{ course.location }}</div>
                                        </div>
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 学习进度 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-xl font-bold text-gray-800">
                    <i class="fa fa-tasks mr-2 text-primary"></i>学习进度
                </h2>
                <a href="{{ url_for('score_analytics') }}" class="btn btn-sm btn-primary">
                    查看详细分析
                </a>
            </div>
            
            <!-- 学习进度图表 -->
            <div class="mb-4">
                <canvas id="progressChart" height="250"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 右侧：活动和快速入口 -->
    <div class="col-lg-4">
        <!-- 近期活动 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-xl font-bold text-gray-800">
                    <i class="fa fa-calendar-check-o mr-2 text-primary"></i>近期活动
                </h2>
                <a href="{{ url_for('activities') }}" class="btn btn-sm btn-primary">
                    查看全部
                </a>
            </div>
            
            <!-- 活动列表 -->
            <div class="upcoming-events">
                {% for activity in upcoming_activities %}
                <div class="event-item">
                    <div class="font-medium text-gray-800">{{ activity.title }}</div>
                    <div class="event-date">
                        <i class="fa fa-calendar-o mr-1"></i>{{ moment(activity.start_time).format('MM-DD HH:mm') }}
                        <span class="ml-2"><i class="fa fa-map-marker mr-1"></i>{{ activity.location }}</span>
                    </div>
                </div>
                {% else %}
                <div class="text-center text-gray-500 py-4">
                    <i class="fa fa-info-circle text-2xl mb-2"></i>
                    <p>暂无近期活动</p>
                </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- 快速入口 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fa fa-bolt mr-2 text-primary"></i>快速入口
            </h2>
            
            <div class="grid grid-cols-2 gap-3">
                <a href="{{ url_for('add_course') }}" class="btn btn-outline-primary w-full py-3 card-hover">
                    <i class="fa fa-plus-circle text-lg mb-2 block"></i>
                    添加课程
                </a>
                <a href="{{ url_for('add_score') }}" class="btn btn-outline-secondary w-full py-3 card-hover">
                    <i class="fa fa-plus-square text-lg mb-2 block"></i>
                    记录成绩
                </a>
                <a href="{{ url_for('add_activity') }}" class="btn btn-outline-success w-full py-3 card-hover">
                    <i class="fa fa-calendar-plus-o text-lg mb-2 block"></i>
                    创建活动
                </a>
                <a href="{{ url_for('add_resource') }}" class="btn btn-outline-warning w-full py-3 card-hover">
                    <i class="fa fa-upload text-lg mb-2 block"></i>
                    上传资源
                </a>
            </div>
        </div>
        
        <!-- 资源推荐 -->
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="text-xl font-bold text-gray-800">
                    <i class="fa fa-bookmark mr-2 text-primary"></i>推荐资源
                </h2>
                <a href="{{ url_for('resources') }}" class="btn btn-sm btn-primary">
                    浏览更多
                </a>
            </div>
            
            <!-- 资源列表 -->
            <ul class="list-unstyled">
                {% for resource in recommended_resources %}
                <li class="mb-3 pb-3 border-b border-gray-100">
                    <a href="{{ url_for('resource_detail', resource_id=resource.id) }}" class="text-gray-800 hover:text-primary">
                        <i class="fa fa-file-{{ resource.file_type }}-o mr-2"></i>{{ resource.title }}
                    </a>
                    <div class="text-xs text-gray-500 mt-1">
                        <span><i class="fa fa-user-o mr-1"></i>{{ resource.uploader.username }}</span>
                        <span class="mx-2">•</span>
                        <span><i class="fa fa-download mr-1"></i>{{ resource.downloads }} 次下载</span>
                    </div>
                </li>
                {% else %}
                <li class="text-center text-gray-500 py-4">
                    <i class="fa fa-info-circle text-2xl mb-2"></i>
                    <p>暂无推荐资源</p>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 学习进度图表
    const ctx = document.getElementById('progressChart').getContext('2d');
    const progressChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ progress_labels|safe }},
            datasets: [{
                label: '学习进度',
                data: {{ progress_data|safe }},
                borderColor: '#0d6efd',
                backgroundColor: 'rgba(13, 110, 253, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    ticks: {
                        callback: function(value) {
                            return value + '%';
                        }
                    }
                }
            }
        }
    });
    
    // 添加页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.card-hover');
        cards.forEach((card, index) => {
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
</script>
{% endblock %}